<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
* {margin:0px; padding:0px; border-width:0px;}
#parentDiv {width:200px; height:200px; background:#39F; position:absolute; left:400px; top:200px;}
#parentDiv div {background:#F03; width:10px; height:10px; position:absolute;}
</style>
<script type="text/javascript">
window.onload = function(){
	window.oDispInput = document.getElementById('dispInput');
	var oParentDiv = document.getElementById('parentDiv');
	var oLtDiv = document.getElementById('ltDiv');
	var oLbDiv = document.getElementById('lbDiv');
	var oRtDiv = document.getElementById('rtDiv');
	var oRbDiv = document.getElementById('rbDiv');
	oLtDiv.onmousedown = function(ev){
		var oEvent = ev || event;
		var $this = this;
		initParentDiv(oParentDiv);
		var disX = this.offsetLeft - oEvent.clientX;
		var disY = this.offsetTop - oEvent.clientY;
		document.onmousemove = function(ev){
			var oEvent = ev || event;
			resizeWidth($this, oEvent, disX, oParentDiv, true);
			resizeHeight($this, oEvent, disY, oParentDiv, true)
			return false;
		}
		document.onmouseup = function(){
			document.onmousemove = document.onmouseup = null;
			return false;
		}
		return false;
	}
	oRtDiv.onmousedown = function(ev){
		var oEvent = ev || event;
		var $this = this;
		initParentDiv(oParentDiv);
		var disX = this.offsetLeft - oEvent.clientX;
		var disY = this.offsetTop - oEvent.clientY;
		document.onmousemove = function(ev){
			var oEvent = ev || event;
			resizeWidth($this, oEvent, disX, oParentDiv, false);
			resizeHeight($this, oEvent, disY, oParentDiv, true)
			return false;
		}
		document.onmouseup = function(){
			document.onmousemove = document.onmouseup = null;
			return false;
		}
		return false;
	}
	oLbDiv.onmousedown = function(ev){
		var oEvent = ev || event;
		var $this = this;
		initParentDiv(oParentDiv);
		var disX = this.offsetLeft - oEvent.clientX;
		var disY = this.offsetTop - oEvent.clientY;
		document.onmousemove = function(ev){
			var oEvent = ev || event;
			resizeWidth($this, oEvent, disX, oParentDiv, true);
			resizeHeight($this, oEvent, disY, oParentDiv, false)
			return false;
		}
		document.onmouseup = function(){
			document.onmousemove = document.onmouseup = null;
			return false;
		}
		return false;
	}
	oRbDiv.onmousedown = function(ev){
		var oEvent = ev || event;
		var $this = this;
		initParentDiv(oParentDiv);
		var disX = this.offsetLeft - oEvent.clientX;
		var disY = this.offsetTop - oEvent.clientY;
		document.onmousemove = function(ev){
			var oEvent = ev || event;
			resizeWidth($this, oEvent, disX, oParentDiv, false);
			resizeHeight($this, oEvent, disY, oParentDiv, false)
			return false;
		}
		document.onmouseup = function(){
			document.onmousemove = document.onmouseup = null;
			return false;
		}
		return false;
	}
}

function resizeWidth($this, oEvent, disX, oParentDiv, isLeftResized){
	var l = oEvent.clientX + disX;
	if(isLeftResized){
		var newLeft = l + oParentDiv.originalLeft;
		var newWidth = oParentDiv.originalLeft - newLeft + oParentDiv.originalWidth;
	}else{
		var newWidth = l + $this.offsetWidth;
	}
	if(newWidth<=20){
		return;
	}
	oParentDiv.style.width = newWidth + 'px';
	if(isLeftResized){
		oParentDiv.style.left = newLeft + 'px';
	}
}

function resizeHeight($this, oEvent, disY, oParentDiv, isTopResized){
	var t = oEvent.clientY + disY;
	if(isTopResized){
		var newTop = t + oParentDiv.originalTop;
		var newHeight = oParentDiv.originalTop - newTop + oParentDiv.originalHeight;
	}else{
		var newHeight = t + $this.offsetHeight;
	}
	if(newHeight<=20){
		return;
	}
	oParentDiv.style.height = newHeight + 'px';
	if(isTopResized){
		oParentDiv.style.top = newTop + 'px';
	}
}

function initParentDiv(oParentDiv){
	oParentDiv.originalLeft = oParentDiv.offsetLeft;
	oParentDiv.originalTop = oParentDiv.offsetTop;
	oParentDiv.originalWidth = oParentDiv.offsetWidth;
	oParentDiv.originalHeight = oParentDiv.offsetHeight;
}
</script>
</head>
<body>
<input type="text" id="dispInput" style="width:400px; position:absolute;"/>
<div id="parentDiv">
<div id="ltDiv" style="left:0px; top:0px;"></div>
<div id="lbDiv" style="left:0px; bottom:0px;"></div>
<div id="rtDiv" style="right:0px; top:0px;"></div>
<div id="rbDiv" style="right:0px; bottom:0px;"></div>
</div>
</body>
</html>
